<page-header  >

  <nz-card [nzBordered]="false" class="mb-lg" nzTitle="基本信息">
    <sv-container size="small" col="2">
      <sv label="设备名称">{{device?.name}}</sv>
      <sv label="类型">{{device?.deviceType}}</sv>
      <sv label="最后活动时间">{{device?.lastActive}}</sv>
      <sv label="在线状态">
        <a >{{device?.online}}</a>
      </sv>
   
    </sv-container>
  </nz-card>
  <nz-card [nzBordered]="false">
    <nz-card-tab>
      <nz-tabset nzSize="large">
        <nz-tab nzTitle="告警">
          <st
          #stalarm
          [columns]="columns"
          [data]="alarmapi"
          ps="20"
          [page]="{
            front: false,
            total: true,
            zeroIndexed: true
          }"
          [req]="alarmerq"
          [res]="res"
          [expand]="expand"
          expandRowByClick
          expandAccordion
        >
          <ng-template #expand let-item let-index="index" let-column="column">
            <nz-card nzTitle="告警详情">
              {{item.alarmDetail}}
            </nz-card>
          </ng-template>
        </st>
        </nz-tab>
      
        <nz-tab nzTitle="属性">
          <nz-table [nzNoResult]="null" nzSize="small">
            <thead>
              <tr>
                <td>属性名称</td>
                <td>属性值</td>
                <td>数据侧</td>
                <td>时间</td>
                <td>操作</td>
              </tr></thead
            >
            <tbody>
              <tr *ngFor="let _item of cead; let i = index; let odd = odd" [ngClass]="_item.class">
                <td>{{ _item.keyName }}</td>
                <td>{{ _item.value }}</td>
                <td>{{ _item.dataSide }}</td>
                <td>{{ _item.dateTime }}</td>
                <td>
                  <button
                    nz-button
                    nzType="text"
                    nzDanger
                    nz-popconfirm
                    nzPopconfirmTitle="确认删除属性?"
                    (nzOnConfirm)="removeprop(_item)"
                    nzPopconfirmPlacement="topLeft"
                  >
                    删除
                  </button>
                </td>
  
              </tr>
            </tbody>
          </nz-table>
      

        </nz-tab>
        <nz-tab nzTitle="遥测">
     
            <nz-tabset nzSize="large">
              <nz-tab nzTitle="数据">
                <nz-table [nzNoResult]="null" nzSize="small" nzTableLayout="fixed">
                  <thead>
                    <tr>
                      <td>遥测名称</td>
                      <td nzEllipsis>遥测值</td>
                      <td>变量</td>
                      <td>最大值</td>
                      <td>最小值</td>
                      <td>平均值</td>
                      <td>时间</td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let _item of cetd; let i = index; let odd = odd" [ngClass]="_item.class">
                      <td>{{ _item.keyName }}</td>
                      <td nzBreakWord  >{{ _item.value }}</td>
                      <td>{{ _item.variation }}</td>
                      <td>{{ _item.max }}</td>
                      <td>{{ _item.min }}</td>
                      <td>{{ _item.average }}</td>
                      <td>{{ _item.dateTime }}</td>
                    </tr>
                  </tbody>
                </nz-table>
              </nz-tab>
              <nz-tab nzTitle="图表">
                <nz-checkbox-group [(ngModel)]="tempcharts" (ngModelChange)="tempchartschecked()"></nz-checkbox-group>
  <!-- 
    仪表板的形式展示遥测
    <div  *ngFor="let _item of tempcharts; let i = index; let odd = odd"   >
                  <g2-gauge [title]="_item.keyName" [height]="180" [percent]="_item.value" style="width: 200px;height:200px;display: flexbox;"></g2-gauge>
             </div>   -->

           <!-- 控制每个遥测单独显示或者集合显示的开关-->      
 <!-- <label nz-checkbox [(ngModel)]="singlechart">是否集合显示</label> 

              

                <div *ngIf="!singlechart"> <div  *ngFor="let _item of tempcharts; let i = index; let odd = odd"   >
                  <g2-timeline maxAxis="1" [data]="_item.chartdata" [titleMap]="_item.titleMap" [height]="220" mask="MM月DD日" maskSlider="MM月dd日" *ngIf="_item.checked"
                   ></g2-timeline>  
                 </div></div>
                    -->

            <div *ngIf="singlechart">
              <g2-timeline [maxAxis]="singlechartAxis" [data]="singlechartdata" [titleMap]="singletitlemap" [height]="400" mask="MM月DD日" maskSlider="MM月dd日" 
              ></g2-timeline>  

            </div>
           

             
              </nz-tab>
              <nz-tab nzTitle="历史">
             
                  <form nz-form class="search__form" action="search">
                    <div nz-row>
                      <div nz-col >
                        <nz-form-item>
                          <nz-form-label nzFor="name">遥测属性</nz-form-label>
                          <nz-form-control> <tag-select>
                            <nz-tag
                              *ngFor="let i of cetd; let idx = index"
                              nzMode="checkable"
                              [(nzChecked)]="i.checked"
                              (nzCheckedChange)="ontempsnztagchange(i)"
                            >
                              {{ i.keyName }}
                            </nz-tag>
                          </tag-select> 
                             </nz-form-control>
                        </nz-form-item>
                      </div>
              


                      <div nz-col >
                        <nz-form-item>
                          <nz-form-label nzFor="name">时间</nz-form-label>
                          <nz-form-control>   
                            <nz-range-picker 
                            [nzShowTime]="{ nzFormat: 'HH:mm' }"
                            nzFormat="yyyy-MM-dd HH:mm"
                            (nzOnOk)="ontempsdatetimeOk($event)"
                          ></nz-range-picker>
                    
                             </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div nz-col [nzSpan]="24" style="text-align: right">
                        <button nz-button type="submit" [nzType]="'primary'" (click)="gettempslist()">搜索</button>
                        <!--<button nz-button type="submit" (click)="getData()" [nzType]="'primary'" [nzLoading]="loading">查询</button>-->
                        <button nz-button type="reset" (click)="resettemps()" class="mx-sm">重置</button>
                      </div>
                    </div>
              
                    <!--<button nz-button [nzType]="'primary'" [routerLink]="['/manage/authority/roleform']" [queryParams]="{Id:-1}">
                    <i nz-icon nzType="plus"></i>
                    <span>{{ 'button.new' | translate }}</span>
                  </button>-->
                  </form>

                  
                  <st
                  #sttemps
                  [columns]="tempscolumns"
                  [data]="apitemps"
                  ps="20"
                  [page]="{
                    front: false,
                    total: true,
                    zeroIndexed: true
                  }"
                  [req]="rqtemps"
                  [res]="restemps"
               
                >
                  <ng-template #expand let-item let-index="index" let-column="column">
                    <nz-card nzTitle="告警详情">
                      {{item.alarmDetail}}
                    </nz-card>
                  </ng-template>
                </st>



           
            </nz-tab>
            </nz-tabset>
        </nz-tab>
        <nz-tab nzTitle="规则">
          <nz-table [nzNoResult]="null">
            <thead>
            <tr>
              <td>规则名称</td>
              <td>备注</td>
              <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let _item of cerd;s let i = index; let odd = odd">
              <td>{{ _item.name }}</td>
              <td>{{ _item.ruleDesc }}</td>
              <td>
                <button nz-button
                        nzType="text"
                        nzDanger
                        nz-popconfirm
                        nzPopconfirmTitle="确认删除规则?"
                        (nzOnConfirm)="removerule( _item)"
                        nzPopconfirmPlacement="topLeft">
                  删除
                </button>
              </td>
            </tr>
            </tbody>
          </nz-table>
        </nz-tab>
        <nz-tab nzTitle="事件">
          <st #stevent [columns]="eventcolumns" [data]="eventsurl" ps="10" [page]="{
            front: false,
            total: true,
            zeroIndexed: true
          }" [req]="eventreq" [res]="res"   [expand]="expandevent" expandAccordion>
            <ng-template #expandevent let-item let-index="index" let-column="column">
              <nz-card nzTitle="描述">
                {{ item.eventDesc }}
              </nz-card>
              <nz-card nzTitle="输入值">
                {{ item.mataData }}
              </nz-card>
            </ng-template>
          </st>

        </nz-tab>

      </nz-tabset>
    </nz-card-tab>
 
  </nz-card>


</page-header>
